<!-- 日期时间 -->
<template>
	<view name='KXDateTime' >
		<view  @click="open">
		</view>
			<view class="but">
				<text @click="close">取消</text>
				<text @click="ok">确定</text>
			</view>
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			    </picker-view-column>
				<picker-view-column v-show="this_time">
				    <view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column v-show="this_time">
				    <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>
			</picker-view>
	</view>
</template>

<script>
	export default {
		name: 'KXDateTime',
		props: {
			date: '',	// 默认时间
			start: '',	// 是否显示 ：时-分-秒
			default_time:''	// 设置当前时间是否显示 1 显示 
		},
		data: function () {
		    const date = new Date()
		    const years = []
		    const year = date.getFullYear()
		    const months = []
		    const month = date.getMonth() + 1
		    const days = []
		    const day = date.getDate()
			const hours = []
			const hour = date.getHours()         //小时 ,返回 Date 对象的小时 (0 ~ 23)
			const minutes = []
			const minute = date.getMinutes()    //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
			
			let rows = ''
		    for (let i = 2019; i <= date.getFullYear()+100; i++) {
		        years.push(i)
		    }
		    for (let i = 1; i <= 12; i++) {
		        months.push(i)
		    }
		    for (let i = 1; i <= 31; i++) {
		        days.push(i)
		    }
			for (let i = 1; i <= 60; i++) {
			    hours.push(i)
			}
			for (let i = 1; i <= 60; i++) {
			    minutes.push(i)
			}
		    return {
		        title: 'picker-view',
		        years,
		        year,
		        months,
		        month,
		        days,
		        day,
				hour,
				hours,
				minute,
				minutes,
		        value: [999, month - 1, day - 1, 0 , 0],
		        visible: true,
		        indicatorStyle: `height: 50px;`,
				runDataSorce: '',
				this_time: false,	// 是否显示时分
				mo_time: '', // 默认时间
				de_time: 0,
		    }
		},
		mounted() {
			if(this.date == null){
				this.date = '';
			}
			if(this.start){
				this.this_time = true;
			}
			// 时间定位
			let tr_year = '';
			let tr_month = '';
			let tr_dat = '';
			let tr_time = '';
			let tr_mins = '';
			if(this.date){
				this.value = [];
				tr_year = this.date.substr(0,4);
				tr_month = this.date.substr(5,2);
				tr_dat = this.date.substr(8,2);
				tr_time = this.date.substr(11,2);
				tr_mins = this.date.substr(14,2);
				
				for(let i in this.years){
					if(this.years[i] == tr_year){
						this.value.push(i)
					}
				}
				for(let i in this.months){
					if(this.months[i] == tr_month){
						this.value.push(i)
					}
				}
				for(let i in this.days){
					if(this.days[i] == tr_dat){
						this.value.push(i)
					}
				}
				for(let i in this.hours){
					if(this.hours[i] == tr_time){
						this.value.push(i)
					}
				}
				for(let i in this.minutes){
					if(this.minutes[i] == tr_mins){
						this.value.push(i)
					}
				}
				
			}else{
				for(let i in this.years){
					if(this.years[i] == this.year){
						if(this.start){
							this.value =  [i, this.month - 1, this.day - 1,0,0];
						}else {
							this.value =  [i, this.month - 1, this.day - 1];
						}
					}
				}
				// 设置默认时间
				if(this.default_time){
					let montime = this.month < 10 ? '0' + this.month : this.month 
					let daytime = this.day < 10 ? '0' + this.day : this.day 
					let hourtime = this.hour < 10 ? '0' + this.hour : this.hour 
					let minutetime = this.minute < 10 ? '0' + this.minute : this.minute 
					this.de_time = 1;
					if(this.start == 1){
						this.mo_time = this.year + '-' + montime + '-' + daytime + ' ' + hourtime + ':' + minutetime;
					}else {
						this.mo_time = this.year + '-' + montime + '-' + daytime;
					}
				}
			}
			
			// 是否显示时分
			if(this.start){
				this.this_time = true;
			}
			
		},
		methods: {
			// 日期判断显示 31 ，29，28，30
			timeout(val){
				this.days = [];
				for (let i = 1; i <= val; i++) {
				    this.days.push(i)
				}
			},
			
			//  接收中数据
		    bindChange: function (e) {
				const val = e.detail.value;
				if(this.months[val[1]] === 2){
					if(this.years[val[0]]%4){
						this.timeout(28);
					}else {
						this.timeout(29);
					}
				}else {
					if(this.months[val[1]] == 4 || this.months[val[1]] == 6 || this.months[val[1]] == 9 || this.months[val[1]] == 11){
						this.timeout(30);
					}else {
						this.timeout(31);
					}
				}
		        this.year = this.years[val[0]];
		        this.month = this.months[val[1]] <10 ? '0' + this.months[val[1]] : this.months[val[1]];
		        this.day = this.days[val[2]] <10 ? '0' + this.days[val[2]] :  this.days[val[2]];
				this.hour = this.hours[val[3]] <10 ? '0' + this.hours[val[3]] :  this.hours[val[3]];
				this.minute = this.minutes[val[4]] <10 ? '0' + this.minutes[val[4]] :  this.minutes[val[4]];
				if(this.start){
					this.runDataSorce = this.year + '-' + this.month + '-' + this.day + ' ' + this.hour + ':' + this.minute;
				}else{
					this.runDataSorce = this.year + '-' + this.month + '-' + this.day;
				}
				
		    },
			// 打开弹窗
			open(){
				this.$refs.popup.open('bottom');
				this.value[0] = Number(this.value[0]);
			},
			
			
			close(){
				this.$emit('cloes')
				
			},
			
			// 数据返回
			ok(){
				this.de_time = 0;
				if(this.runDataSorce){
					this.$emit('rundata',this.runDataSorce);
					this.$refs.popup.close();
				}else if(this.mo_time){
					this.$emit('rundata',this.runDataSorce);
					this.$refs.popup.close();
				}else{
					uni.showToast({
						icon:'error',
						title: '返回数据错误！'
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
    .picker-view {
        width: 750rpx;
        height: 600rpx;
		background-color: #fff;
    }
    .item {
        height: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
	.but {
		background: #fff;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		border-bottom: 1px solid #f0f0f0;
		text-align: left;
	
		text {
			display: inline-block;
		}
	
		text:last-child {
			float: right;
			color: $uni-color-primary;
		}
	}
</style>